<template>
		<div class="mb16">
			<button class="gjsx" @click="showClick">高级筛选 <img src="../img/高级筛选.png" style="height: 15px;"/></button>
			<div class="ml1">
				<el-input type="text" maxlength="20" placeholder="输入地址/房号/电话/姓名" class="el-input"/>
				<el-button type="primary" style="height: 40px; background-color: white;color: black; border: none;">搜索</el-button>
			</div>
		</div>
		<div class="xiala_5" v-show="showXiala">
		    <form>
				<el-form-item label="登记状态" class="xz">
				      <el-select  placeholder="请选择登记状态">
				      </el-select>
				</el-form-item>
				<el-form-item label="车辆标签" class="xz">
				      <el-select  placeholder="请选择车辆标签">
				      </el-select>
				</el-form-item>
				<el-button class="btn1_c">重置</el-button><el-button class="btn2_c">查询</el-button>
			</form>
		</div>
		<div class="buttom">
			<div class="b_top">
				<el-button class="btn3" @click="AddCar">添加车辆</el-button>
				<el-popover
				    placement="bottom"
				    :width="200"
				    trigger="hover"
					class="el-popover"
				  >
				    <template #reference>
				      <el-button class="m-2">更多</el-button>
				    </template>
				    
				    <div slot="content" style="margin: 0px;">
				      <ul class="u1">
				        <li>批量导入</li>
				        <li>导出数据</li>
				        <li>批量修改房屋信息</li>
				      </ul>
				    </div>
				  </el-popover>
			</div>
		<el-table :data="data.car" style="width: 100% padding: 10px;">
			<el-table-column type="selection" width="55" />
			<el-table-column property="carmun" label="车辆牌号" width="200"/>
			<el-table-column property="czname" label="车主姓名" width="200"/>
			<el-table-column property="czphone" label="车主电话"  width="200"/>
			<el-table-column property="guanlcw" label="关联车位" width="250"/>
			<el-table-column property="associatedhousing" label="关联房屋" width="250"/>
			<el-table-column property="carlaber" label="车辆标签" width="200"/>
			<el-table-column property="address" label="操作"/>
		</el-table>
		</div>
		<div class="demo-pagination-block">
		    <el-pagination
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="400"
		    />
		</div>
</template>

<script setup>
import { ref,reactive,onMounted } from 'vue';
import { ElTable } from 'element-plus';
import { useRouter } from 'vue-router'
  import $http from '../router/AxiosApi.js'; 
// 定义响应式变量
const showXiala = ref(false);  
const router = useRouter()

// 定义函数来切换显示状态
const showClick = () => {
  console.log("aaa");
  showXiala.value = !showXiala.value;  
};

  const data=reactive({
  		car: []
  	})
  	onMounted(() => {
  		loadcar()
  	})
  	const loadcar=()=>{
  		$http.get("Car/selectCarInfo")
  			.then((res) => {
  				console.log(res.data)
  				data.car = res.data.data 
				console.log(data.car)
  			})
  	}

const AddCar=()=>{
	router.push({name:'AddCar'});
}
</script>

<style>
	
	.example-showcase .el-dropdown-link {
	  cursor: pointer;
	  color: var(--el-color-primary);
	  display: flex;
	  align-items: center;
	}
	.xiala_5 {
		background-color: white;
		width: 1430px;
		overflow: auto;
		padding: 15px;
		margin-bottom: 10px;
	}
	.xz{
		width: 300px;
		float: left;
		margin-bottom: 0;
		margin-right: 32px;
		height: 56px;
		align-items: center;
		text-align: left;
	}
	.text-center{
		text-align: center;
	}
	.btn1_c{
		position: relative;
		bottom: -10px;
		right:200px;
		width: 100px;
		height: 40px;
		color: #7e8081;
		background-color: #fafafa;
		border: none;
		font-size: 14px;
		padding: 10px;
	}
	.btn2_c{
		position: relative;
		bottom: -10px;
		right:170px;
		width: 100px;
		height: 40px;
		color: #fff;
		background-color: #00c36d;
		border-color: #00c36d;
		font-size: 14px;
	}
	.gjsx{
		background-color: white;
		padding: 10px 15px;
	}
	.mb16{
		margin-bottom: 16px;
		display: -webkit-box;
		display: flex;
		justify-content: flex-end;
		width: 1440px;
	}
	.ml1{
		width: 300px;
		border: none;
		margin-left: 10px;
		display: inline-table;
	}
	.el-input{
		width: 240px;
		height: 40px;
		line-height: 40px;
		border: none;
	}
	.u1{
		margin: 0px;
		padding: 0px;
	}
	.u1>li{
		list-style: none;
		line-height: 20px;
		height: 25px;
		line-height: 190%;
		text-align: left;
		padding: 5px 10px;
		cursor: pointer;
	}
	.u1>li:hover {
		background-color: #d3ffe2; /* 鼠标悬浮时的背景色 */
		color:  #00bd00;
	}
	.el-popover {
	  padding: 0px !important;
	}
	.buttom{
		background-color: white;
		padding: 10px;
		border-radius: 10px;
	}
	.btn3{
		width: 100px;
		height: 40px;
		color: #fff;
		background-color: #00c36d;
		border-color: #00c36d;
		font-size: 14px;	
		margin-bottom: 10px;
	}
	.b_top{
		display: flex;
		justify-content: space-between;
	}
	.m-2{
		padding: 10px 20px;
		align-items: center;
		background-color: #fafafa;
		border: none;
		height: 40px;
		width: 80px;
		
	}
</style>